<!--
 * @Description: 科室的主页
 * @Version: 1.0
 * @Author: YueXuanzi
 * @Date: 2024-09-09 14:42:20
 * @LastEditors: YueXuanzi
 * @LastEditTime: 2024-10-08 13:00:08
 * @心得体会: 无
-->
<template>
    <div class="w-full">
        <el-form :inline="true" :model="formInline" class="w-full h-10">
            <el-form-item label="项目名称">
                <el-input v-model="formInline.projectName" placeholder="项目名称" clearable class="w-40"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSearch">搜索</el-button>
            </el-form-item>
        </el-form>
    </div>
    <el-button type="primary" @click="toAdd">添加</el-button>
    <el-button type="danger" @click="toDel">删除</el-button>
    <br>
    <!-- 表格显示 -->
    <el-table :data="tableData" style="width: 100%" border height="60vh" highlight-current-row @row-dblclick="getInfo" @selection-change="selected">
        <el-table-column fixed type="selection" width="50" />
        <el-table-column prop="projectInspectionId" label="序号" width="80" align="center"></el-table-column>
        <el-table-column prop="projectName" label="项目名称"  align="center"></el-table-column>
        <el-table-column prop="departmentName" label="项目科室"  align="center"></el-table-column>
        <el-table-column prop="description" label="项目描述"  align="center"></el-table-column>
        <el-table-column prop="price" label="价格"  align="center"></el-table-column>
        <el-table-column prop="remark" label="备注"  align="center"></el-table-column>
        <el-table-column prop="stutas" label="状态"  align="center">
          <template #default="scope">
            <el-tag :type="scope.row.status === '1' ? 'success' : 'danger'">{{ scope.row.status === '1' ? '正常' : '停用' }}</el-tag>
          </template> 
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150" align="center">
            <template #default="scope">
                <el-button type="primary" @click="toEdit(scope.row)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="flex justify-center items-end w-full h-16 mt-2">
        <el-pagination
            v-model:current-page="pageForm.currentPage"
            v-model:page-size="pageForm.pageSize"
            :page-sizes="[10, 20, 30, 40]"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageForm.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            />
            <el-switch v-model="background" class="ml-2" />
    </div>
    <el-dialog v-model="dialogVisible" :title="EditOrAddTitle" width="50%">
        <el-form :model="EditOrAdd" label-width="80px">
            <el-form-item label="项目名称">
                <el-input v-model="EditOrAdd.projectName" placeholder="项目名称" clearable />
            </el-form-item>
            <el-form-item label="项目科室">
              <el-select v-model="EditOrAdd.departmentId" placeholder="请选择项目科室">
                <el-option v-for="item in departmentList" :key="item.departmentId" :label="item.departmentName" :value="item.departmentId" />
              </el-select>
            </el-form-item>
            <el-form-item label="项目描述">
                <el-input v-model="EditOrAdd.description" placeholder="项目描述" />
            </el-form-item>
            <el-form-item label="价格">
                <el-input v-model="EditOrAdd.price" placeholder="价格" />
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="EditOrAdd.remark" placeholder="备注" />
            </el-form-item>
            <el-form-item label="状态">
                <el-radio-group v-model="EditOrAdd.status">
                    <el-radio label="1">正常</el-radio>
                    <el-radio label="0">停用</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">提交</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!-- 查看详情 -->
    <el-dialog v-model="dialogInfoVisible" title="详情" width="50%">
      <el-form :model="info" label-width="80px">
            <el-form-item label="项目名称">
                <el-text>{{ info.projectName }}</el-text>
            </el-form-item>
            <el-form-item label="项目科室">
              <el-text>{{ info.departmentName }}</el-text>
            </el-form-item>
            <el-form-item label="项目描述">
                <el-text>{{ info.description }}</el-text>
            </el-form-item>
            <el-form-item label="价格">
                <el-text>{{ info.price }}</el-text>
            </el-form-item>
            <el-form-item label="备注">
                <el-text>{{ info.remark }}</el-text>
            </el-form-item>
            <el-form-item label="状态">
                <el-tag :type="info.status === '1' ? 'success' : 'danger'">{{ info.status === '1' ? '正常' : '停用' }}</el-tag>
            </el-form-item>
            <el-form-item label="创建时间">
                <el-text>{{ info.createTime }}</el-text>
            </el-form-item>
            <el-form-item label="创建人">
                <el-text>{{ info.creater }}</el-text>
            </el-form-item>
        </el-form>
    </el-dialog>
    
</template>

<script setup>
import { computed, ref, reactive } from 'vue'
// 导入axios
import { getList, getDepartmentList, add, del, edit } from "@/api/project/project.js"
import { ElMessage } from 'element-plus';

// 表格数据
const tableData = ref([
])
// 北京
const background = ref(false)
// 最后一页面
const pageForm = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 50
})
// 搜索
const formInline = reactive({
  projectName: "",
})
const pageSearch = computed(() => {
  return {
    page: pageForm.currentPage,
    limit: pageForm.pageSize,
    projectName: formInline.projectName,
    // departmentName: formInline.departmentName,
  }
})
// 选择复选框
let idArr = []
//  详情
let dialogInfoVisible = ref(false)
const selected = (data) => {
  idArr = []
  data.forEach((value) => {
    idArr.push(value.projectInspectionId)
  })
}
let EditOrAddTitle = ref("添加项目") 
let dialogVisible = ref(false)
// 预约表单
let EditOrAdd = reactive({
    projectInspectionId: "",
    projectName: "",
    departmentId: "",
    description: "",
    price: "",
    remark: "",
    status: "",
})
let info = reactive({
  projectInspectionId: "",
  projectName: "",
  departmentId: "",
  description: "",
  price: "",
  remark: "",
  status: "",
  createTime: "",
  creater: ""
})
let departmentList = reactive([])
// 判断是添加还是编辑
const EA = ref(false)

function initDate(){
      getList(pageSearch.value).then(res =>{
        // console.log(res)
        tableData.value = res.data.list
        // 进行数据修改！！！
        pageForm.currentPage = res.data.currPage
        pageForm.pageSize = res.data.pageSize
        pageForm.total = res.data.totalCount
      })
      getDepartmentList().then(res =>{
        // console.log(res)
        departmentList = reactive(res.data);
      })
}
// 首先进行初始化
initDate()
// 搜搜
const onSearch = () => {
  // console.log(pageSearch)
  initDate()
}
// 双击查看(先不查看)
const getInfo = (row) => {
  console.log(row.projectInspectionId)
  dialogInfoVisible.value = true
  info = reactive(row)
}


// 进行编辑
const toEdit = (row) => {
  // 设置可见
  dialogVisible.value = true
  EditOrAddTitle = "编辑项目"
  EditOrAdd = reactive(row)
  EA.value = false
  // console.log(EditOrAdd)
}
// 进行添加
const toAdd = () => {
  // 设置可见
  dialogVisible.value = true
  EditOrAddTitle = "添加项目"
  EA.value = true
  EditOrAdd = reactive({
    projectInspectionId: "",
    projectName: "",
    departmentId: "",
    description: "",
    price: "",
    remark: "",
    status: "",
  })
}
const toDel = () => {
  console.log(idArr)
  del(idArr).then(res=>{
    if(res.code == 200){
      ElMessage.success("删除成功")
    }else{
      ElMessage.error(res.msg)
    }
    initDate()
  })
}
// 提交
function onSubmit(){
    console.log(EditOrAdd)
    if(EditOrAdd.projectInspectionId == ""){
      add(EditOrAdd).then(res=>{
        if(res.code == 200){
          ElMessage.success("添加成功")
          initDate()
        }else{
          ElMessage.error(res.msg)
        }
      })
    }else{
      edit(EditOrAdd).then(res=>{
        if(res.code == 200){
          ElMessage.success("编辑成功")
          initDate()
        }else{
          ElMessage.error(res.msg)
        }
      })
    }
    dialogVisible.value = false
}

const handleSizeChange = (val) => {
  // console.log(`${val} items per page`)
  initDate()
}
const handleCurrentChange = (val) => {
  // console.log(`current page: ${val}`)
  initDate()
}

</script>

<style scoped>

</style>